<template>
  <div class="hello">
    <header>
      <span><img src=".././assets/tuceng10.png" alt=""><router-link to="/denglu">返回</router-link></span>
      <span>短信验证登录</span>
      <span class="btn">&nbsp;&nbsp;&nbsp;</span>
    </header><!-- /header -->
    <div class="slide">
      <span><input type="text" placeholder="请输入手机号"></span>
    </div>
    <div class="slide2">
      <span>获取手机验证码</span>
    </div>
    <div class="slide3">
      <span>我已接受并同意用户协议</span>
      <span>其他登录方式</span>
    </div>
    <footer>
      <div>
        立即注册
      </div>
    </footer>
    <div style="clear: both"></div>

  </div>
</template>

<script>
export default {
  name: 'denglu2',
  data () {
    return {
      msg: 'Welcome'
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.px2rem(@name, @px){
  @{name}: @px / 75 * 1rem;
}
body,html{
width:100%;
}
.txh{
  display: flex;
  display: -webkit-flex;
}
@color: red;
#app{
.btn{
color: @color;
}
width:100%;
header{
width:100%;
.txh();
justify-content: space-between;
align-items: center;
.px2rem(height,40);
.px2rem(margin-top,33);
// .px2rem(line-height,40);
span{
.txh();
align-items: center;
.px2rem(height,40);
}
span:first-child{
.px2rem(font-size,30);
color: #7b7b7b;
.px2rem(padding-left,30);
img{
.px2rem(width,18);
.px2rem(height,37);
.px2rem(margin-right,13);

}
}
span:nth-child(2){
.px2rem(font-size,40);
color: #454545;
.px2rem(margin-right,90);
}
}

.slide{
.px2rem(margin-top,61);
// width: 100%;
.px2rem(height,81);
.txh();
align-items: center;
justify-content: center;
span{
  display: block;
  .px2rem(margin-left,61);
    .px2rem(padding-left,40);
    .px2rem(margin-right,61);
  input{
    .px2rem(height,71);
    border: none;
  }

  border: 1px solid gray;
  color: #ccc;
  width: 85%;
  display: block;
.px2rem(height,81);
.px2rem(line-height,81);
.px2rem(font-size,30);
}
}
.slide2{
.px2rem(margin-top,55);
// width: 100%;
.px2rem(height,81);
.txh();
align-items: center;

span{
  display: block;
  .px2rem(margin-left,61);
  .px2rem(margin-right,61);
  background: blue;
  color: #fff;
  width: 85%;
  display: block;
  text-align: center;
.px2rem(height,81);
.px2rem(line-height,81);
.px2rem(font-size,30);
}
}
.slide3{
.px2rem(margin-top,25);
.px2rem(height,81);
.txh();
align-items: center;
justify-content: space-between;
span{
  display: block;
  color: #a8a8a8;
.px2rem(height,81);
.px2rem(line-height,81);
.px2rem(font-size,24);
}
span:first-child{
.px2rem(margin-left,61);
width: 40%;
}
span:last-child{
float: right;
.px2rem(margin-right,61);
}
}
footer{
.px2rem(margin-top,82);

div{
.px2rem(margin-left,262);
.px2rem(height,67);
.px2rem(margin-right,262);
color: #0068b7;
border: 2px solid #0068b7;
.px2rem(font-size,30);
text-align: center;
.px2rem(line-height,67);
.px2rem(margin-bottom,502);
}
}


}
</style>
